<template>
    <transition name="slide_in_left">
        <div class="myCenter" v-show="show">
            <div class="myCenter__contentBox">
                <div class="myCenter__head">
                    <div class="myCenter__head__img">
                        <img v-if="cookie.avatar" @click="$router.push('myInfo')" :src="cookie.avatar" alt="">
                        <img v-else @click="$router.push('myInfo')" src="../../assets/img/icon_default_headPic.png" alt="">
                    </div>
                    <!-- myInfo.realname||myInfo.tel -->
                    <span class="tel">德菁科技</span>
                    <p class="company_logo_box">
                        <img class="company_logo" src="../../assets/img/dj_logo.png" alt="">
                        <span class="sc">普通会员</span>
                    </p>
                </div>

                <div class="myCenter__list">
                    <p class="myCenter__list__item" v-for="(item,index) in myCenterList" @click="$router.push(item.name)" :key="index">
                        <i :class="['iconfont',item.icon]"></i>
                        <span>{{item.title}}</span>
                    </p>
                </div>

            </div>

            <transition name="fade_in">
                <div class="myCenter__shadow" @click="$emit('show')" v-show="show"></div>
            </transition>
        </div>
    </transition>
</template>

<script>
    import {getMyInfo} from '@/http'
    import {mapGetters} from 'vuex'
    export default {
        name:'myCenter',
        data(){
            return{
                myCenterList:[
                    {name:'myOrder',title:'我的行程',icon:'icon-icon'},
                    {name:'myWallet',title:'我的钱包',icon:'icon-qianbao'},
                    {name:'msgCenter',title:'消息提醒',icon:'icon-xiaoxi'},
                    {name:'mySet',title:'系统设置',icon:'icon-shezhi'},
                    // {name:'recommend',title:'推荐有奖',icon:'icon-jiangpin'},
                    // {name:'agency',title:'我要代理',icon:'icon-dailishangguanli'},
                    // {name:'ycshare',title:'我要分享',icon:'icon-fenxiang'}
                ]
            }
        },
        props:['show'],
        computed:{
            ...mapGetters(['myInfo','cookie'])
        },
        methods:{
            getMyInfo(){
                getMyInfo().then((data)=>{
                    this.$store.dispatch('myInfo',data.data)
                })
            }
        },
        mounted(){
            this.getMyInfo()
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../style/var.scss';

    @b myCenter{
        position: fixed;
        top:0;
        left:0;
        z-index: 999;
        width:100%;
        height:100%;
        background: transparent;

        @e contentBox{
            width:60%;
            height:100%;
            background:#fff;
        }

        @e head{
            display: flex;
            align-items: center;
            flex-direction: column;
            padding:100px 0 50px;

            @e img{
                border-radius: 50%;
                width:200px;
                height:200px;
                overflow: hidden;
            }
            
        }
        @e list{
            width:100%;

            @e item{
                display: flex;
                align-items:center;
                padding:30px 100px;
                font-size:17px;
                
            }
        }

        @e shadow{
            position: absolute;
            z-index: -1;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:rgba(0,0,0,.4);
        }
    }

    img{width:100%;}
    .tel{font-size: 16px;padding-top:20px;}
    .company_logo_box{
        display: flex;
        align-items:center;
        
        img{
            width:35px;
            margin:0 5px;
        }
        .sc{font-size: 12px;}
    }
    .company_logo{width:42px;}
    .myCenter__list__item i{padding-right:50px;}
</style>

